Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve screen reader experience on site meta lists #239

Merged
merged 1 commit into from
Oct 11, 2023
Merged

Improve screen reader experience on site meta lists #239

merged 1 commit into from
Oct 11, 2023

Conversation

adamwoodnz
Copy link
Contributor

@adamwoodnz adamwoodnz commented Oct 11, 2023 •
edited
Loading

Fixes #235

The flex layout on the site meta list items causes the nested elements to be read individually, rather than as a complete label: value pair.

This PR adds an aria-label attribute on the list items which is read as intended, eg. 'Category: Creative'. Nested elements have aria-hidden unless they contain a URL, as this still needs to be accessible. This reduces duplicated content unless necessary.

On the home page the labels are visibly hidden, so there are changes to not render them at all in this case, and rely on the aria-label instead.

There is no visual change.

The resulting HTML looks like this:

Home

<ul>
	<li class="is-meta-post_title" aria-label="Site title: Age of Union">
		<span><a href="http://localhost:8888/age-of-union/">Age of Union</a></span>
	</li>
	<li class="is-meta-domain" aria-label="URL: ageofunion.com">
		<span><a class="external-link" href="https://ageofunion.com/" target="_blank" rel="noopener noreferrer">ageofunion.com</a></span>
	</li>
	<li class="is-meta-category" aria-label="Category: Community">
		<span><a href="http://localhost:8888/category/community/" rel="tag">Community</a></span>
	</li>
</ul>

Single

<ul>
	<li class="is-meta-country" aria-label="Country: Canada">
		<strong aria-hidden="true">Country</strong>
		<span aria-hidden="true">Canada</span>
	</li>
	<li class="is-meta-category" aria-label="Category: Community">
		<strong aria-hidden="true">Category</strong>
		<span><a href="http://localhost:8888/category/community/" rel="tag">Community</a></span>
	</li>
	<li class="is-meta-published" aria-label="Published: September 2023">
		<strong aria-hidden="true">Published</strong>
		<span aria-hidden="true">September 2023</span>
	</li>
	<li class="is-meta-post_tag" aria-label="Site tags: Conservation, Environment, Nonprofit">
		<strong aria-hidden="true">Site tags</strong>
		<span><a href="http://localhost:8888/tag/conservation/" rel="tag">Conservation</a>, <a href="http://localhost:8888/tag/environment/" rel="tag">Environment</a>, <a href="http://localhost:8888/tag/nonprofit/" rel="tag">Nonprofit</a></span>
	</li>
</ul>

Testing

Use a screen reader to navigate the home and single site pages, checking how the screen reader interprets the meta list.

It should announce the list, then read each list item as label: value, and you should be able to navigate to the link within if appropriate (only country and published don't have links).

The label text should not be read twice.

@adamwoodnz adamwoodnz added the Accessibility Issues related to keyboard navigation, screen readers, etc label Oct 11, 2023
@adamwoodnz adamwoodnz added this to the Launch milestone Oct 11, 2023
@adamwoodnz adamwoodnz self-assigned this Oct 11, 2023
@adamwoodnz adamwoodnz force-pushed the fix/235-meta-list-accessibility branch from 249ce47 to eb2c337 Compare October 11, 2023 03:54
@adamwoodnz
Copy link
Contributor Author

adamwoodnz commented Oct 11, 2023 •
edited
Loading

@alexstine would you mind taking a look at this solution please?

I've only been able to test with Voiceover so far, I'm hoping to be able to test with NVDA asap.

@adamwoodnz adamwoodnz force-pushed the fix/235-meta-list-accessibility branch from eb2c337 to 4bc2c54 Compare October 11, 2023 04:06
@alexstine
Copy link

@adamwoodnz Where do I test this?

renintw
renintw approved these changes Oct 11, 2023
View reviewed changes
Copy link
Contributor

@renintw renintw left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on VoiceOver. Things work as described. The enhancements sound nice, especially the homepage one, like it.

@alexstine Is it possible for you to set up the environment for this showcase theme on your end and then switch to this branch? If not, I'm thinking that downloading the HTML files and sending them to you can also be another option. What's the method you use most often?

@adamwoodnz
Copy link
Contributor Author

@adamwoodnz Where do I test this?

@alexstine I feel fairly confident this will be an improvement, I could merge and you could test on the staging site if that's easier than setting up a local env?

@alexstine
Copy link

@adamwoodnz Yep, please go ahead. I will test once live.

@adamwoodnz adamwoodnz merged commit c8b5321 into main Oct 11, 2023
1 check passed
@adamwoodnz adamwoodnz deleted the fix/235-meta-list-accessibility branch October 11, 2023 21:42
This was referenced Oct 11, 2023
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@renintw renintw renintw approved these changes

@StevenDufresne StevenDufresne Awaiting requested review from StevenDufresne

Assignees

@adamwoodnz adamwoodnz

Labels
Accessibility Issues related to keyboard navigation, screen readers, etc
Projects
@adamwoodnz's WIP
Status: Done
WordPress.org Redesign: Showcase
Status: Done
Milestone
Launch
Development

Successfully merging this pull request may close these issues.

Accessibility improvements for the Site metadata table
3 participants
@adamwoodnz @alexstine @renintw